<template>
  <div id="box1">
    <div id="top">
      <div id="top-left"></div>
      <div id="top-center">综合素质分可视化大屏</div>
      <div>
    <button @click="gotoLogin()">后台</button>
  </div>
      <div id="top-right"></div>
    </div>
    <div id="bottom">
      <div id="left">
        <div id="left-top">
          <div id="l-t-head">
            <headStyle headText="模块1"></headStyle>
          </div>
          <div id="l-t-content">

          </div>
          <div id="l-t-food"><foodStyle></foodStyle></div>
        </div>
        <div id="left-bottom">
          <div id="l-b-head">
            <headStyle headText="模块2"></headStyle>
          </div>
          <div id="l-b-content">

            <div id="l-b-con-bottom"></div>
          </div>
          <div id="l-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
      <div id="center">
        <div id="center-top">
          <div id="title1" class="C-T-t"></div>
          <div id="title2" class="C-T-t"></div>
          <div id="title3" class="C-T-t"></div>
        </div>
        <div id="center-bottom">
          <div id="c-b-head"><head2Style></head2Style></div>
          <div id="c-b-content"></div>
          <div id="c-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
      <div id="right">
        <div id="right-top">
          <div id="r-t-head"><headStyle headText="模块3"></headStyle></div>
          <div id="r-t-content">

          </div>
          <div id="r-t-food"><foodStyle></foodStyle></div>
        </div>
        <div id="right-bottom">
          <div id="r-b-head"><headStyle headText="模块4"></headStyle></div>
          <div id="r-b-content">

          </div>
          <div id="r-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chinaMap from "../assets/china.json";
import foodStyle from "../components/food.vue";
import headStyle from "../components/head.vue";
import head2Style from "../components/head2.vue";
import titleStyle from "../components/title.vue";

import { countryData } from "../resource/countryApi";
import * as echarts from "echarts"; //引入echarts 插件;
//调用封装在resource文件夹里面的echarts.js里定义的方法
import { bar1, bar, mid, left_up, left_dowm, right_up, right_down } from "../resource/echarts";

export default {
  //定义组件，注册组件
  components: {
    head2Style,
    headStyle,
    foodStyle,
    titleStyle,
  },
  //定义变量
  data() {
    return {
      stu_id: [],//学生的id
      stu_name: [],//学生的名字
      stu_class: [],//学生的班级
    };
  },
  //定义方法，要做哪些事情
  methods: {
    //获取后台国家页面的数据
    gotoLogin(){
      this.$router.push("/login")
    },
    async getCountryData() {
      const res = await countryData();
      console.log("res:", res.data.data);

      res.data.data.forEach((item) => {
        this.stu_id.push(item.stu_id),
        this.stu_name.push(item.stu_name),
        this.stu_class.push(item.stu_class)
      });
      console.log("this.stuid", this.stu_id);
      console.log("this.stuid", this.stu_class);
      console.log("this.stuid", this.stu_name);
    },
    // myChinaMap() {
    //   //注册一个echarts地图
    //   echarts.registerMap("chinamap", chinaMap);
    //   var mychart = echarts.init(document.getElementById("c-b-content"));
    //   //定义一个变量用于存放地图各个区域的各种数据，目的是让地图中的每个区域都跟区域的数据匹配上
    //   //series中type为map的数据系列会根据地图中各个区域的name跟data数据中的name 匹配到一起
    //   var mapData = [];
    //   this.basic.forEach((item) => {
    //     //console.log("item:", item);
    //     mapData.push({
    //       name: item.name
    //         .replace("省", "")
    //         .replace("市", "")
    //         .replace("自治区", "")
    //         .replace("壮族", "")
    //         .replace("维吾尔", "")
    //         .replace("回族", ""),
    //       gnum: item.gnum,
    //       jsj: item.jsj,
    //       mj: item.mj,
    //       snum: item.snum,
    //       ssb: item.ssb,
    //       tsl: item.tsl,
    //       ze: item.ze,
    //     });
    //   });
    //   //console.log("mapData:",mapData)
    //   //定义一个专门放置八个点的数据，点的数据格式是经度、维度、以及其他数据，在平面直角坐标系中应该是x轴坐标，y轴坐标以及其他数据
    //   var scatterData = [];
    //   var mapFeatures = echarts.getMap("chinamap");
    //   console.log("mapFeatures:", mapFeatures.geoJson.features);
    //   var i = 0;
    //   for (i = 0; i < 8; i++) {
    //     //console.log(mapData[i].name)
    //     mapFeatures.geoJson.features.forEach((v) => {
    //       //console.log("v:",v)
    //       if (mapData[i].name == v.properties.name) {
    //         scatterData.push([
    //           v.properties.cp[0],
    //           v.properties.cp[1],
    //           v.properties.name,
    //           mapData[i].gnum,
    //           mapData[i].snum,
    //           mapData[i].jsj,
    //           mapData[i].tsl,
    //           mapData[i].ssb,
    //           mapData[i].ze,
    //           mapData[i].mj,

    //         ]);
    //       }
    //     });
    //   }
    //   //console.log("scatterData:", scatterData);

    //   var option = {
    //     geo: {
    //       type: "map",
    //       map: "chinamap",
    //       itemStyle: {
    //         areaColor: "transparent",
    //         borderColor: "aqua",
    //       },
    //       emphasis: {
    //         label: {
    //           show: false,
    //         },
    //       },
    //     },
    //     tooltip: {
    //       show: true,
    //       formatter: function (params) {
    //         if (params.componentSubType == "map") {
    //           //console.log("params:", params);
    //           var content = `${params.data.name}</br>
    //         区域高职院校数量：${params.data.gnum}</br>
    //         区域双高院校数量：${params.data.snum}</br>
    //         `;
    //           return content;
    //         }
    //         else { 
    //           var content = `${params.data[2]}</br>
    //         区域高职院校数量：${params.data[3]}</br>
    //         区域双高院校数量：${params.data[4]}</br>
    //         `;
    //           return content;
    //         }
           
    //       },
    //     },
    //     series: [
    //       {
    //         type: "map",
    //         map: "chinamap",
    //         data: mapData,
    //         itemStyle: {
    //           areaColor: "transparent",
    //           borderColor: "aqua",
    //         },
    //         emphasis: {
    //           label: {
    //             show: false,
    //           },
    //         },
    //       },
    //       {
    //         type: "scatter",
    //         coordinateSystem: "geo",
    //         data: scatterData,
    //         label: {show:true}
    //       },
    //     ],
    //   };
    //   mychart.setOption(option);
    //   mychart.on("click", (params) => { 
    //     console.log("点击获取params:",params)
    //     console.log("this:", this)
    //     this.$router.push(`/province?name=${params.name}`)

    //   })
    // },

    bars() {
      // bar({
      //   dom: "l-t-content",
      //   ydata1: this.stuid,
      // });
      mid({
        dom:"center-bottom",
        ydata1: this.stu_id,
      });

      left_up({
        dom:"l-t-content",
        ydata1: this.stu_id,
      });
      left_dowm({
        dom:"l-b-content",
        ydata1: this.stu_id,
      });
      right_up({
        dom:"r-t-content",
        ydata1: this.stu_id,
      });
      right_down({
        dom:"r-b-content",
        ydata1: this.stu_id,
      });
    },
  },

  //加载页面的时候触发的方法
  async mounted() {
    await this.getCountryData();
    this.bars();
    this.myChinaMap();
  },
};
</script>

<style lang="less" scoped>
#box1 {
  width: 100vw;
  height: 100vh;
  background: url("../assets/职教桥项目图片/bcg.png");
  background-size: 100% 100%;
  #top {
    width: 100vw;
    height: 7vh;
    display: flex;
    justify-content: space-between;
    //background-color: aquamarine;
    padding: 1.5vh 2vh;
    #top-left {
      width: 10vw;
      height: 4vh;
      background-color: aquamarine;
    }
    #top-center {
      width: 16vw;
      height: 4vh;
      //background-color: aquamarine;
      background: url("../assets/职教桥项目图片/title.png");
      background-size: 100% 100%;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center; //字体内容左右居中
      align-items: center; //字体内容上下居中
    }
    #top-right {
      width: 16vw;
      height: 4vh;
      background-color: aquamarine;
    }
  }
  #bottom {
    width: 100vw;
    height: 93vh;
    display: flex;
    justify-content: space-between;
    #left {
      width: 27vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #left-top {
        width: 26vw;
        height: 48vh;
        background-color: rgba(0, 150, 250, 0.1);

        #l-t-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #l-t-content {
          width: 26vw;
          height: 41vh;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; //铺满一行后自动换行
          .l-t-pic {
            width: 12.9vw;
            height: 20.4vh;
            padding: 1vh;
            //background-color: aliceblue;
            .title {
              width: 12.9vw;
              height: 2vh;
            }
            .pic {
              width: 12.9vw;
              height: 18.4vh;
            }
          }
        }
        #l-t-food {
          width: 26vw;
          height: 3vh;
        }
      }
      #left-bottom {
        width: 26vw;
        height: 41vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #l-b-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #l-b-content {
          width: 26vw;
          height: 34vh;
          #l-b-con-top {
            width: 26vw;
            height: 22vh;
            display: flex;
            justify-content: space-between;

            .l-b-con-p {
              width: 12.5vw;
              height: 22vh;
              //background-color: aqua;
              .pic1 {
                width: 12.5vw;
                height: 20vh;
                //background-color: antiquewhite;
              }
            }
          }
          #l-b-con-bottom {
            width: 26vw;
            height: 12vh;
            //background-color:red;
          }
        }
        #l-b-food {
          width: 26vw;
          height: 3vh;
        }
      }
    }
    #center {
      width: 45vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #center-top {
        width: 44vw;
        height: 22vh;
        //background-color:rgba(0,150,250,0.1);
        background: url("../assets/职教桥项目图片/center-top.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh;
        .C-T-t {
          width: 13vw;
          height: 12vh;
          //background-color: aqua;
          background: url("../assets/职教桥项目图片/center-item.png");
          background-size: 100% 100%;
        }
      }
      #center-bottom {
        width: 44vw;
        height: 67vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #c-b-head {
          width: 44vw;
          height: 4vh;
        }

        #c-b-content {
          width: 44vw;
          height: 60vh;
          //background-color: aliceblue;
        }
        #c-b-food {
          width: 44vw;
          height: 3vh;
        }
      }
    }
    #right {
      width: 27vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #right-top {
        width: 26vw;
        height: 60vh;
        background-color: rgba(0, 150, 250, 0.1);
        #r-t-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #r-t-content {
          width: 26vw;
          height: 53vh;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .r-t-pic {
            width: 12.5vw;
            height: 17vh;
            //background-color: aquamarine;
            .pic2 {
              width: 12.5vw;
              height: 15vh;
              //background-color: aquamarine;
            }
          }
        }
        #r-t-food {
          width: 26vw;
          height: 3vh;
        }
      }
      #right-bottom {
        width: 26vw;
        height: 29vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #r-b-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #r-b-content {
          width: 26vw;
          height: 22vh;
          display: flex;
          justify-content: space-between;
          .r-b-pic {
            width: 13vw;
            height: 22vh;
            .r-b-title {
              width: 100%;
              height: 2vh;
            }
            .r-b-pic {
              width: 100%;
              height: 20vh;
            }
          }
        }
        #r-b-food {
          width: 26vw;
          height: 3vh;
        }
      }
    }
  }
}
</style>